```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket与HTTP协议深度解析</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
        }
        h1, h2, h3, h4 {
            font-family: 'Noto Serif SC', serif;
            font-weight: 600;
            color: #1a1a1a;
        }
        .hero {
            background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
        }
        .card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }
        .feature-icon {
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            margin-bottom: 1.5rem;
            font-size: 1.5rem;
        }
        .comparison-table {
            border-collapse: separate;
            border-spacing: 0;
        }
        .comparison-table thead th {
            position: sticky;
            top: 0;
            background-color: #f8fafc;
            z-index: 10;
        }
        .comparison-table tbody tr:hover {
            background-color: #f8fafc;
        }
        .diagram-container {
            background-color: #f8fafc;
            border-radius: 0.5rem;
            padding: 1.5rem;
        }
        .gradient-text {
            background: linear-gradient(90deg, #6e8efb, #a777e3);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        .tab-item {
            transition: all 0.3s ease;
        }
        .tab-item:hover {
            color: #6e8efb;
        }
        .tab-item.active {
            color: #6e8efb;
            border-bottom: 3px solid #6e8efb;
        }
        .footnote {
            font-size: 0.85rem;
            color: #64748b;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero text-white py-20 px-4 md:px-0">
        <div class="container mx-auto max-w-5xl text-center">
            <h1 class="text-4xl md:text-5xl font-bold mb-6">WebSocket <span class="font-light">与</span> HTTP</h1>
            <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto leading-relaxed">
                现代Web通信协议深度解析与对比
            </p>
            <div class="flex justify-center space-x-4">
                <a href="#comparison" class="px-6 py-3 bg-white text-indigo-600 rounded-full font-semibold hover:bg-gray-100 transition">
                    <i class="fas fa-balance-scale-left mr-2"></i>核心对比
                </a>
                <a href="#applications" class="px-6 py-3 bg-transparent border-2 border-white text-white rounded-full font-semibold hover:bg-white hover:text-indigo-600 transition">
                    <i class="fas fa-laptop-code mr-2"></i>应用场景
                </a>
            </div>
        </div>
    </section>

    <!-- Introduction -->
    <section class="py-16 px-4 md:px-0">
        <div class="container mx-auto max-w-5xl">
            <div class="bg-white rounded-xl shadow-md p-8">
                <h2 class="text-2xl font-bold mb-6 text-center">现代Web通信协议概览</h2>
                <p class="text-lg mb-6">
                    在现代互联网应用中，HTTP和WebSocket是两种非常重要的通信协议，它们在功能和应用场景上各有特点。作为开发者，我们熟悉的HTTP协议是一种"请求-响应"模式的短连接协议，主要用于网页浏览和API调用。每次通信都需要客户端发起请求，服务器响应后连接即被关闭。而WebSocket则是一种双向通信的长连接协议，它允许服务器和客户端之间实时、低延迟地进行数据交换。随着实时交互需求的增加，WebSocket的优势逐渐显现。
                </p>
                <div class="flex justify-center my-8">
                    <img src="https://cdn.nlark.com/yuque/0/2024/png/21449790/1733206924026-889f5e6b-5dce-4e7a-be65-e92a2b124d8c.png" alt="HTTP vs WebSocket" class="rounded-lg shadow-lg max-w-full h-auto">
                </div>
                <p class="text-lg">
                    我们在日常开发中应该如何选择这两种协议呢？HTTP适用于大部分传统的业务需求，比如网页加载、表单提交和数据查询。而WebSocket更适合那些对实时性要求较高的场景，比如在线聊天、多人游戏、股票行情推送和直播弹幕系统。
                </p>
            </div>
        </div>
    </section>

    <!-- Core Concepts -->
    <section id="comparison" class="py-16 bg-gray-50 px-4 md:px-0">
        <div class="container mx-auto max-w-5xl">
            <h2 class="text-3xl font-bold mb-12 text-center">基础概念对比</h2>
            
            <div class="grid md:grid-cols-2 gap-8">
                <!-- HTTP Card -->
                <div class="card bg-white rounded-xl shadow-md p-6">
                    <div class="feature-icon bg-blue-100 text-blue-600 mx-auto">
                        <i class="fas fa-exchange-alt"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4 text-center">HTTP 协议</h3>
                    <div class="space-y-4">
                        <div>
                            <h4 class="font-semibold text-gray-800">定义</h4>
                            <p>HTTP（Hypertext Transfer Protocol）是一种基于请求-响应模型的无状态协议。它是互联网上最常见的通信协议，用于传输文本、图像、视频等超媒体数据。</p>
                        </div>
                        <div>
                            <h4 class="font-semibold text-gray-800">特点</h4>
                            <ul class="list-disc pl-5 space-y-2">
                                <li><span class="font-medium">单向通信</span>：客户端发起请求，服务器被动响应。</li>
                                <li><span class="font-medium">无状态</span>：每次请求是独立的，不依赖之前的请求状态。</li>
                                <li><span class="font-medium">短连接为主</span>：通信完成后连接即断开，HTTP/1.1 开始支持长连接，但本质仍是请求-响应模式。</li>
                            </ul>
                        </div>
                        <div>
                            <h4 class="font-semibold text-gray-800">适用场景</h4>
                            <p>网页加载、RESTful API 调用、文件下载等需要明确请求和响应的场景。</p>
                        </div>
                    </div>
                </div>
                
                <!-- WebSocket Card -->
                <div class="card bg-white rounded-xl shadow-md p-6">
                    <div class="feature-icon bg-purple-100 text-purple-600 mx-auto">
                        <i class="fas fa-comments"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4 text-center">WebSocket 协议</h3>
                    <div class="space-y-4">
                        <div>
                            <h4 class="font-semibold text-gray-800">定义</h4>
                            <p>WebSocket 是 HTML5 标准引入的全双工通信协议，建立在 TCP 之上，允许客户端和服务器之间的实时双向数据传输。</p>
                        </div>
                        <div>
                            <h4 class="font-semibold text-gray-800">特点</h4>
                            <ul class="list-disc pl-5 space-y-2">
                                <li><span class="font-medium">全双工通信</span>：客户端和服务器均可随时主动发送消息。</li>
                                <li><span class="font-medium">持久连接</span>：连接建立后，通信持续到主动关闭或异常断开。</li>
                                <li><span class="font-medium">低开销</span>：相比 HTTP 请求的多次握手，WebSocket 在初始连接建立后，后续通信仅包含必要的数据帧，减少了网络负载。</li>
                            </ul>
                        </div>
                        <div>
                            <h4 class="font-semibold text-gray-800">适用场景</h4>
                            <p>实时聊天、在线协作、多玩家游戏、金融数据推送（如股票行情）以及直播弹幕等需要实时交互的应用。</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Comparison Table -->
            <div class="mt-12 bg-white rounded-xl shadow-md overflow-hidden">
                <div class="p-6">
                    <h3 class="text-xl font-bold mb-6">核心差异对比表</h3>
                    <div class="overflow-x-auto">
                        <table class="comparison-table w-full">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-6 py-3 text-left text-sm font-semibold text-gray-700">特性</th>
                                    <th class="px-6 py-3 text-left text-sm font-semibold text-gray-700">HTTP</th>
                                    <th class="px-6 py-3 text-left text-sm font-semibold text-gray-700">WebSocket</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-200">
                                <tr>
                                    <td class="px-6 py-4 font-medium">通信模式</td>
                                    <td class="px-6 py-4">请求-响应，单向</td>
                                    <td class="px-6 py-4">全双工，双向</td>
                                </tr>
                                <tr>
                                    <td class="px-6 py-4 font-medium">连接类型</td>
                                    <td class="px-6 py-4">短连接为主（支持长连接，但需额外配置）</td>
                                    <td class="px-6 py-4">长连接，保持持久</td>
                                </tr>
                                <tr>
                                    <td class="px-6 py-4 font-medium">状态性</td>
                                    <td class="px-6 py-4">无状态</td>
                                    <td class="px-6 py-4">有状态</td>
                                </tr>
                                <tr>
                                    <td class="px-6 py-4 font-medium">通信效率</td>
                                    <td class="px-6 py-4">较高的开销，每次通信需要发送完整请求头</td>
                                    <td class="px-6 py-4">较低的开销，仅发送数据帧</td>
                                </tr>
                                <tr>
                                    <td class="px-6 py-4 font-medium">适用场景</td>
                                    <td class="px-6 py-4">静态资源加载、API 调用</td>
                                    <td class="px-6 py-4">实时交互，如聊天、协作、行情推送等</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Protocol Level Differences -->
    <section class="py-16 px-4 md:px-0">
        <div class="container mx-auto max-w-5xl">
            <h2 class="text-3xl font-bold mb-12 text-center">协议级别的区别</h2>
            <div class="bg-white rounded-xl shadow-md p-8 mb-12">
                <p class="text-lg mb-6">
                    WebSocket 和 HTTP 都是基于 TCP 的协议，但在设计目标、通信机制以及协议实现上有显著差异。
                </p>
                <div class="flex justify-center my-8">
                    <img src="https://cdn.nlark.com/yuque/0/2024/png/21449790/1733207033016-6acdec92-f92e-4f58-bf30-146d1594ed59.png" alt="Protocol Differences" class="rounded-lg shadow-lg max-w-full h-auto">
                </div>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8">
                <!-- Connection Establishment -->
                <div class="card bg-white rounded-xl shadow-md p-6">
                    <h3 class="text-xl font-bold mb-4 flex items-center">
                        <span class="bg-blue-100 text-blue-600 p-2 rounded-full mr-3">
                            <i class="fas fa-handshake"></i>
                        </span>
                        建立连接的过程
                    </h3>
                    <div class="space-y-4">
                        <div class="p-4 bg-blue-50 rounded-lg">
                            <h4 class="font-semibold text-blue-800 mb-2">HTTP</h4>
                            <p>每次请求都会经过完整的 TCP 三次握手，随后由客户端发送 HTTP 请求报文，服务器响应后关闭或维持连接（长连接需通过 <code class="bg-blue-100 px-1 rounded">Connection: keep-alive</code> 实现）。是典型的<strong>无状态协议</strong>，服务器并不保存客户端的连接状态。</p>
                        </div>
                        <div class="p-4 bg-purple-50 rounded-lg">
                            <h4 class="font-semibold text-purple-800 mb-2">WebSocket</h4>
                            <p>在建立连接时，依赖 HTTP 协议完成初始的握手过程，即客户端通过标准的 HTTP 请求发起升级请求，带有 <code class="bg-purple-100 px-1 rounded">Upgrade: websocket</code> 和 <code class="bg-purple-100 px-1 rounded">Connection: Upgrade</code> 头，服务器确认后切换为 WebSocket 协议。握手成功后，WebSocket 使用的是独立的协议，与 HTTP 逻辑完全分离，且保持长连接，实现双向实时通信。</p>
                        </div>
                        <div class="p-3 bg-gray-50 rounded-lg">
                            <p class="text-sm italic"><strong>对比：</strong>HTTP 是逐次请求逐次建立连接，而 WebSocket 是通过一次握手后建立长连接，避免了频繁的 TCP 连接开销。</p>
                        </div>
                    </div>
                </div>
                
                <!-- Communication Mode -->
                <div class="card bg-white rounded-xl shadow-md p-6">
                    <h3 class="text-xl font-bold mb-4 flex items-center">
                        <span class="bg-green-100 text-green-600 p-2 rounded-full mr-3">
                            <i class="fas fa-comments"></i>
                        </span>
                        通信模式
                    </h3>
                    <div class="space-y-4">
                        <div class="p-4 bg-green-50 rounded-lg">
                            <h4 class="font-semibold text-green-800 mb-2">HTTP</h4>
                            <ul class="list-disc pl-5 space-y-2">
                                <li>客户端主动发起请求，服务器响应。</li>
                                <li>服务器无法主动向客户端发送数据（长轮询或 Server-Sent Events 是实现伪实时交互的变通方案，但不够高效）。</li>
                                <li>每次通信均需携带完整的 HTTP 请求头和响应头，包括大量重复字段。</li>
                            </ul>
                        </div>
                        <div class="p-4 bg-yellow-50 rounded-lg">
                            <h4 class="font-semibold text-yellow-800 mb-2">WebSocket</h4>
                            <ul class="list-disc pl-5 space-y-2">
                                <li>双向通信，客户端和服务器均可随时主动发送消息。</li>
                                <li>消息通过帧的形式传输，头部仅包含极少的元信息（如帧类型、长度等），极大降低了数据传输的冗余。</li>
                                <li>消息可以是文本或二进制，支持灵活的数据格式。</li>
                            </ul>
                        </div>
                        <div class="p-3 bg-gray-50 rounded-lg">
                            <p class="text-sm italic"><strong>对比：</strong>HTTP 是<strong>单向请求-响应模式</strong>，而 WebSocket 是<strong>全双工模式</strong>，更适合实时场景。</p>
                        </div>
                    </div>
                </div>
                
                <!-- Statefulness -->
                <div class="card bg-white rounded-xl shadow-md p-6">
                    <h3 class="text-xl font-bold mb-4 flex items-center">
                        <span class="bg-red-100 text-red-600 p-2 rounded-full mr-3">
                            <i class="fas fa-database"></i>
                        </span>
                        状态性
                    </h3>
                    <div class="space-y-4">
                        <div class="p-4 bg-red-50 rounded-lg">
                            <h4 class="font-semibold text-red-800 mb-2">HTTP</h4>
                            <p>无状态协议，每次请求都是独立的，与之前的请求和响应无关。需要额外机制（如 Cookies、Session 或 JWT）来维持用户会话状态。</p>
                        </div>
                        <div class="p-4 bg-indigo-50 rounded-lg">
                            <h4 class="font-semibold text-indigo-800 mb-2">WebSocket</h4>
                            <p>状态协议，连接建立后，客户端与服务器之间的通信可以携带上下文信息，避免重复建立会话状态。适合需要长期维护连接状态的应用场景，如在线聊天、协作工具等。</p>
                        </div>
                        <div class="p-3 bg-gray-50 rounded-lg">
                            <p class="text-sm italic"><strong>对比：</strong>HTTP 无状态，适合简单请求，WebSocket 有状态，更适合需要维护上下文的应用。</p>
                        </div>
                    </div>
                </div>
                
                <!-- Data Transfer Efficiency -->
                <div class="card bg-white rounded-xl shadow-md p-6">
                    <h3 class="text-xl font-bold mb-4 flex items-center">
                        <span class="bg-purple-100 text-purple-600 p-2 rounded-full mr-3">
                            <i class="fas fa-tachometer-alt"></i>
                        </span>
                        数据传输效率
                    </h3>
                    <div class="space-y-4">
                        <div class="p-4 bg-purple-50 rounded-lg">
                            <h4 class="font-semibold text-purple-800 mb-2">HTTP</h4>
                            <p>每次请求都需要包含 HTTP 头部，头部信息可能包含重复字段（如 <code class="bg-purple-100 px-1 rounded">Host</code>、<code class="bg-purple-100 px-1 rounded">User-Agent</code> 等），尤其是在高频短小请求的场景中，头部占用比会显著增加。在长连接模式下，虽然可以复用 TCP 连接，但数据仍需要完整的 HTTP 头部和正文。</p>
                        </div>
                        <div class="p-4 bg-pink-50 rounded-lg">
                            <h4 class="font-semibold text-pink-800 mb-2">WebSocket</h4>
                            <p>数据以帧的形式传输，头部非常简洁，仅包含帧类型、长度等必要信息，显著降低传输开销。支持二进制传输，比 HTTP 仅支持文本更高效。</p>
                        </div>
                        <div class="p-3 bg-gray-50 rounded-lg">
                            <p class="text-sm italic"><strong>对比：</strong>WebSocket 数据传输的头部开销比 HTTP 小得多，尤其在高频通信场景中表现更优。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Handshake and Protocol Upgrade -->
    <section class="py-16 bg-gray-50 px-4 md:px-0">
        <div class="container mx-auto max-w-5xl">
            <h2 class="text-3xl font-bold mb-12 text-center">握手与协议升级</h2>
            <div class="bg-white rounded-xl shadow-md p-8 mb-8">
                <p class="text-lg mb-6">
                    WebSocket 与 HTTP 的握手与协议升级机制是 WebSocket 协议的重要特点。它通过初始的 HTTP 握手完成连接建立，并在此基础上升级为 WebSocket 协议，实现长连接和全双工通信。
                </p>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8">
                <!-- Handshake Process -->
                <div class="card bg-white rounded-xl shadow-md p-6">
                    <h3 class="text-xl font-bold mb-4">握手过程的概述</h3>
                    <p class="mb-4">WebSocket 的连接建立从一个标准的 HTTP 请求开始，客户端向服务器发送 HTTP 请求，要求升级协议到 WebSocket。服务器接收到请求后，验证相关信息，若同意升级，会返回特定的响应头，并建立 WebSocket 连接。这个过程在网络上是一次性完成的，建立后的连接与 HTTP 无关。</p>
                    
                    <div class="bg-gray-800 rounded-lg p-4 text-white overflow-x-auto">
                        <pre class="text-sm"><code>GET /chat HTTP/1.1
Host: example.com:8000
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Version: 13</code></pre>
                    </div>
                    <p class="mt-4 text-sm text-gray-600">客户端请求示例：包含升级到 WebSocket 的必要头部信息</p>
                    
                    <div class="bg-gray-800 rounded-lg p-4 text-white mt-4 overflow-x-auto">
                        <pre class="text-sm"><code>HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=</code></pre>
                    </div>
                    <p class="mt-4 text-sm text-gray-600">服务器响应示例：确认协议升级</p>
                </div>
                
                <!-- Security Verification -->
                <div class="card bg-white rounded-xl shadow-md p-6">
                    <h3 class="text-xl font-bold mb-4">安全校验机制</h3>
                    <div class="mb-6">
                        <p><code class="bg-gray-100 px-1 rounded">Sec-WebSocket-Key</code> 是由客户端生成的随机值。服务器将其与一个固定 GUID（<code class="bg-gray-100 px-1 rounded">258EAFA5-E914-47DA-95CA-C5AB0DC85B11</code>）拼接，经过 SHA-1 哈希计算后再进行 Base64 编码，生成 <code class="bg-gray-100 px-1 rounded">Sec-WebSocket-Accept</code>。客户端校验 <code class="bg-gray-100 px-1 rounded">Sec-WebSocket-Accept</code> 是否匹配，确保握手未被篡改。</p>
                    </div>
                    
                    <h4 class="font-bold mb-2">握手后的协议切换</h4>
                    <ul class="list-disc pl-5 space-y-2">
                        <li><strong>TCP 长连接</strong>：底层仍然是 TCP 连接，但数据帧的格式由 HTTP 切换为 WebSocket。</li>
                        <li><strong>双向通信</strong>：客户端和服务器均可主动发送数据帧，无需像 HTTP 那样每次发起新请求。</li>
                    </ul>
                    
                    <div class="mt-6 p-4 bg-blue-50 rounded-lg">
                        <h4 class="font-semibold text-blue-800 mb-2">消息帧的结构</h4>
                        <p>握手完成后，数据传输使用 WebSocket 帧格式，头部更小，包含以下信息：</p>
                        <ul class="list-disc pl-5 mt-2">
                            <li>数据长度</li>
                            <li>帧类型（如文本、二进制、关闭帧等）</li>
                            <li>是否为消息的结束帧</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Data Format and Transmission -->
    <section class="py-16 px-4 md:px-0">
        <div class="container mx-auto max-w-5xl">
            <h2 class="text-3xl font-bold mb-12 text-center">数据格式与传输</h2>
            
            <div class="grid md:grid-cols-2 gap-8 mb-12">
                <!-- HTTP Data Transmission -->
                <div class="card bg-white rounded-xl shadow-md p-6">
                    <h3 class="text-xl font-bold mb-4 flex items-center">
                        <span class="bg-blue-100 text-blue-600 p-2 rounded-full mr-3">
                            <i class="fas fa-exchange-alt"></i>
                        </span>
                        HTTP 数据传输
                    </h3>
                    <div class="space-y-4">
                        <div>
                            <h4 class="font-semibold text-gray-800 mb-2">传输特点</h4>
                            <ul class="list-disc pl-5 space-y-2">
                                <li><strong>基于请求-响应模式：</strong> HTTP 是单向的，客户端发起请求后，服务器返回响应。</li>
                                <li><strong>每次通信需附加完整的头部信息：</strong> 包括方法、URL、协议版本等信息。头部开销通常较大，对于频繁的短小数据传输会降低效率。</li>
                            </ul>
                        </div>
                        <div>
                            <h4 class="font-semibold text-gray-800 mb-2">数据格式</h4>
                            <ul class="list-disc pl-5 space-y-2">
                                <li>HTTP 数据包含请求头、响应头，以及可选的消息体。</li>
                                <li>消息体可以是文本（JSON、XML、HTML 等）或二进制数据。</li>
                            </ul>
                        </div>
                    </div>
                </div>
                
                <!-- WebSocket Data Transmission -->
                <div class="card bg-white rounded-xl shadow-md p-6">
                    <h3 class="text-xl font-bold mb-4 flex items-center">
                        <span class="bg-purple-100 text-purple-600 p-2 rounded-full mr-3">
                            <i class="fas fa-comments"></i>
                        </span>
                        WebSocket 数据传输
                    </h3>
                    <div class="space-y-4">
                        <div>
                            <h4 class="font-semibold text-gray-800 mb-2">传输特点</h4>
                            <ul class="list-disc pl-5 space-y-2">
                                <li><strong>全双工通信：</strong> WebSocket 支持客户端和服务器同时发送数据。</li>
                                <li><strong>低开销的持久连接：</strong> 握手后，无需每次传输都附带冗长的头部信息。</li>
                                <li><strong>事件驱动模型：</strong> 无需轮询，数据更新时可以主动推送。</li>
                            </ul>
                        </div>
                        <div>
                            <h4 class="font-semibold text-gray-800 mb-2">数据帧格式</h4>
                            <p>WebSocket 使用帧（Frame）作为最小的数据传输单元。每条消息可以包含一个或多个帧。</p>
                            <div class="mt-3 bg-gray-800 rounded-lg p-4 text-white overflow-x-auto">
                                <pre class="text-sm"><code>+---------------------------------------------------------------+
| FIN | Opcode | Mask | Payload Length | Masking Key | Payload  |
+---------------------------------------------------------------+</code></pre>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Performance Comparison -->
            <div class="bg-white rounded-xl shadow-md p-8">
                <h3 class="text-xl font-bold mb-6">性能对比</h3>
                <div class="grid md:grid-cols-2 gap-8">
                    <div>
                        <h4 class="font-semibold text-gray-800 mb-3">头部开销</h4>
                        <ul class="space-y-3">
                            <li class="flex items-start">
                                <span class="bg-blue-100 text-blue-600 p-1 rounded-full mr-2">
                                    <i class="fas fa-exchange-alt text-xs"></i>
                                </span>
                                <span>HTTP 每次请求和响应都需要完整的头部信息，头部通常在几百字节到数 KB。</span>
                            </li>
                            <li class="flex items-start">
                                <span class="bg-purple-100 text-purple-600 p-1 rounded-full mr-2">
                                    <i class="fas fa-comments text-xs"></i>
                                </span>
                                <span>WebSocket 的头部较小（一般只有 2-10 字节），适合高频小数据包的场景。</span>
                            </li>
                        </ul>
                    </div>
                    <div>
                        <h4 class="font-semibold text-gray-800 mb-3">实时性</h4>
                        <ul class="space-y-3">
                            <li class="flex items-start">
                                <span class="bg-blue-100 text-blue-600 p-1 rounded-full mr-2">
                                    <i class="fas fa-exchange-alt text-xs"></i>
                                </span>
                                <span>HTTP 的轮询方式（如短轮询或长轮询）增加了延迟和带宽消耗。</span>
                            </li>
                            <li class="flex items-start">
                                <span class="bg-purple-100 text-purple-600 p-1 rounded-full mr-2">
                                    <i class="fas fa-comments text-xs"></i>
                                </span>
                                <span>WebSocket 保持长连接，无需多次握手，数据可以实时推送或拉取。</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Security -->
    <section class="py-16 bg-gray-50 px-4 md:px-0">
        <div class="container mx-auto max-w-5xl">
            <h2 class="text-3xl font-bold mb-12 text-center">安全性</h2>
            
            <div class="bg-white rounded-xl shadow-md p-8 mb-8">
                <p class="text-lg mb-6">
                    WebSocket 和 HTTP 在安全性上有一些共性，也有显著差异。理解两者在设计和应用中的安全性特点，有助于在实际场景中正确使用并防范潜在的安全威胁。
                </p>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8">
                <!-- Common Security -->
                <div class="card bg-white rounded-xl shadow-md p-6">
                    <h3 class="text-xl font-bold mb-4">共同的安全基础</h3>
                    <ul class="list-disc pl-5 space-y-2">
                        <li>
                            <span class="font-medium">传输加密：</span> 
                            <strong>HTTPS 和 WSS（WebSocket Secure）</strong> 均基于 TLS（Transport Layer Security）加密通信，确保数据传输的机密性、完整性和真实性。加密机制防止中间人攻击（MITM）、数据篡改和监听。
                        </li>
                        <li>
                            <span class="font-medium">身份认证：</span>
                            两者都可以通过认证机制（如 OAuth、JWT）验证通信双方的身份，防止未经授权的访问。
                        </li>
                    </ul>
                    <div class="mt-6 p-4 bg-blue-50 rounded-lg">
                        <p class="italic">尽管两者都使用 TLS，但 WebSocket 的长连接特性使其安全需求更复杂。</p>
                    </div>
                </div>
                
                <!-- WebSocket Challenges -->
                <div class="card bg-white rounded-xl shadow-md p-6">
                    <h3 class="text-xl font-bold mb-4">WebSocket 的安全性挑战</h3>
                    <p class="mb-4">WebSocket 的独特特性（如持久连接和全双工通信）使其在安全性上面临更多挑战，需要更精细的设计和管理。</p>
                    
                    <div class="space-y-4">
                        <div class="p-4 bg-yellow-50 rounded-lg">
                            <h4 class="font-semibold text-yellow-800 mb-2">握手阶段的安全性</h4>
                            <ul class="list-disc pl-5 space-y-2">
                                <li>
                                    <span class="font-medium">劫持风险：</span> 
                                    如果握手过程未加密，可能被攻击者劫持。解决方案是始终使用 WSS（WebSocket Secure）。
                                </li>
                                <li>
                                    <span class="font-medium">跨站请求伪造（CSRF）：</span>
                                    攻击者可能通过伪造请求利用现有的认证信息进行恶意连接。
                                    解决方案：结合 <code class="bg-yellow-100 px-1 rounded">Origin</code> 和 <code class="bg-yellow-100 px-1 rounded">Host</code> 头验证来源，确保请求来自受信任的源。
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                
                <!-- Long Connection Risks -->
                <div class="card bg-white rounded-xl shadow-md p-6">
                    <h3 class="text-xl font-bold mb-4">长连接中的安全风险</h3>
                    <div class="space-y-4">
                        <div class="p-4 bg-red-50 rounded-lg">
                            <h4 class="font-semibold text-red-800 mb-2">连接劫持</h4>
                            <ul class="list-disc pl-5 space-y-2">
                                <li>长连接使攻击者有更多时间尝试劫持会话。</li>
                                <li>解决方案：使用 TLS 加密，定期验证客户端身份（如重新认证）。</li>
                            </ul>
                        </div>
                        <div class="p-4 bg-purple-50 rounded-lg">
                            <h4 class="font-semibold text-purple-800 mb-2">资源耗尽攻击</h4>
                            <ul class="list-disc pl-5 space-y-2">
                                <li>攻击者可能通过创建大量 WebSocket 连接耗尽服务器资源。</li>
                                <li>解决方案：
                                    <ul class="list-disc pl-5 mt-1">
                                        <li>限制单个客户端的并发连接数。</li>
                                        <li>使用 Web 应用防火墙（WAF）监控并阻止异常连接行为。</li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                
                <!-- Data Transmission Security -->
                <div class="card bg-white rounded-xl shadow-md p-6">
                    <h3 class="text-xl font-bold mb-4">数据传输安全</h3>
                    <div class="space-y-4">
                        <div class="p-4 bg-green-50 rounded-lg">
                            <h4 class="font-semibold text-green-800 mb-2">数据篡改与重放攻击</h4>
                            <ul class="list-disc pl-5 space-y-2">
                                <li>WebSocket 数据帧的结构较轻量，不同于 HTTP 的严格字段校验，可能被恶意篡改。</li>
                                <li>解决方案：
                                    <ul class="list-disc pl-5 mt-1">
                                        <li>启用 TLS 加密。</li>
                                        <li>在协议之上添加防篡改的签名验证机制。</li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                        <div class="p-4 bg-indigo-50 rounded-lg">
                            <h4 class="font-semibold text-indigo-800 mb-2">二进制传输风险</h4>
                            <ul class="list-disc pl-5 space-y-2">
                                <li>WebSocket 支持二进制数据，攻击者可能利用其传输恶意代码或数据。</li>
                                <li>解决方案：
                                    <ul class="list-disc pl-5 mt-1">
                                        <li>在服务端严格验证数据格式和内容。</li>
                                        <li>使用沙箱环境执行传输的代码或指令。</li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Application Scenarios -->
    <section id="applications" class="py-16 px-4 md:px-0">
        <div class="container mx-auto max-w-5xl">
            <h2 class="text-3xl font-bold mb-12 text-center">应用场景</h2>
            
            <div class="bg-white rounded-xl shadow-md p-8 mb-12">
                <p class="text-lg mb-6">
                    WebSocket 和 HTTP 在设计和工作方式上有显著的差异，因此它们适用于不同的业务需求和技术场景。
                </p>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8">
                <!-- WebSocket Applications -->
                <div class="space-y-8">
                    <div class="card bg-white rounded-xl shadow-md p-6">
                        <h3 class="text-xl font-bold mb-4 flex items-center">
                            <span class="bg-purple-100 text-purple-600 p-2 rounded-full mr-3">
                                <i class="fas fa-comments"></i>
                            </span>
                            WebSocket 的应用场景
                        </h3>
                        
                        <div class="space-y-6">
                            <!-- Real-time Scenarios -->
                            <div>
                                <h4 class="font-semibold text-lg text-gray-800 mb-3">实时性要求高的场景</h4>
                                <div class="space-y-3">
                                    <div class="flex items-start">
                                        <span class="bg-purple-100 text-purple-600 p-1 rounded-full mr-3 mt-1">
                                            <i class="fas fa-comment-dots text-xs"></i>
                                        </span>
                                        <div>
                                            <p class="font-medium">即时通讯应用</p>
                                            <p class="text-sm text-gray-600">典型应用：微信、钉钉、Slack 等聊天工具。WebSocket 的双向通信机制使客户端和服务器能够实时同步消息。</p>
                                        </div>
                                    </div>
                                    <div class="flex items-start">
                                        <span class="bg-purple-100 text-purple-600 p-1 rounded-full mr-3 mt-1">
                                            <i class="fas fa-users text-xs"></i>
                                        </span>
                                        <div>
                                            <p class="font-medium">在线协作工具</p>
                                            <p class="text-sm text-gray-600">典型应用：Google Docs 的实时多人编辑。多人同时编辑文档时，WebSocket 可以推送编辑状态的实时变化。</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Real-time Push -->
                            <div>
                                <h4 class="font-semibold text-lg text-gray-800 mb-3">实时推送</h4>
                                <div class="space-y-3">
                                    <div class="flex items-start">
                                        <span class="bg-purple-100 text-purple-600 p-1 rounded-full mr-3 mt-1">
                                            <i class="fas fa-chart-line text-xs"></i>
                                        </span>
                                        <div>
                                            <p class="font-medium">股票和外汇交易</p>
                                            <p class="text-sm text-gray-600">需要实时更新市场数据，如股票价格、交易量等。WebSocket 的高效推送能力使其适合此类高频数据流。</p>
                                        </div>
                                    </div>
                                    <div class="flex items-start">
                                        <span class="bg-purple-100 text-purple-600 p-1 rounded-full mr-3 mt-1">
                                            <i class="fas fa-running text-xs"></i>
                                        </span>
                                        <div>
                                            <p class="font-medium">体育赛事直播</p>
                                            <p class="text-sm text-gray-600">推送实时比分、赛况更新和评论。</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Online Entertainment -->
                            <div>
                                <h4 class="font-semibold text-lg text-gray-800 mb-3">在线娱乐</h4>
                                <div class="space-y-3">
                                    <div class="flex items-start">
                                        <span class="bg-purple-100 text-purple-600 p-1 rounded-full mr-3 mt-1">
                                            <i class="fas fa-gamepad text-xs"></i>
                                        </span>
                                        <div>
                                            <p class="font-medium">多人在线游戏</p>
                                            <p class="text-sm text-gray-600">如棋牌、实时对战类游戏，需要实时同步玩家动作。WebSocket 提供的低延迟和双向通信可以满足游戏的快速交互需求。</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- HTTP Applications -->
                <div class="space-y-8">
                    <div class="card bg-white rounded-xl shadow-md p-6">
                        <h3 class="text-xl font-bold mb-4 flex items-center">
                            <span class="bg-blue-100 text-blue-600 p-2 rounded-full mr-3">
                                <i class="fas fa-exchange-alt"></i>
                            </span>
                            HTTP 的应用场景
                        </h3>
                        
                        <div class="space-y-6">
                            <!-- Request-Response Scenarios -->
                            <div>
                                <h4 class="font-semibold text-lg text-gray-800 mb-3">请求-响应模式的业务</h4>
                                <div class="space-y-3">
                                    <div class="flex items-start">
                                        <span class="bg-blue-100 text-blue-600 p-1 rounded-full mr-3 mt-1">
                                            <i class="fas fa-file-code text-xs"></i>
                                        </span>
                                        <div>
                                            <p class="font-medium">静态资源加载</p>
                                            <p class="text-sm text-gray-600">典型应用：加载网页上的 HTML、CSS、JavaScript 和图片。HTTP 协议的简单性和广泛兼容性使其成为静态资源加载的首选。</p>
                                        </div>
                                    </div>
                                    <div class="flex items-start">
                                        <span class="bg-blue-100 text-blue-600 p-1 rounded-full mr-3 mt-1">
                                            <i class="fas fa-code text-xs"></i>
                                        </span>
                                        <div>
                                            <p class="font-medium">API 调用</p>
                                            <p class="text-sm text-gray-600">如 RESTful API，前端通过 HTTP 请求后端接口获取数据。典型场景：用户登录、获取商品列表、提交订单等。</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Page Rendering -->
                            <div>
                                <h4 class="font-semibold text-lg text-gray-800 mb-3">页面渲染与数据传输</h4>
                                <div class="space-y-3">
                                    <div class="flex items-start">
                                        <span class="bg-blue-100 text-blue-600 p-1 rounded-full mr-3 mt-1">
                                            <i class="fas fa-browser text-xs"></i>
                                        </span>
                                        <div>
                                            <p class="font-medium">Web 应用页面</p>
                                            <p class="text-sm text-gray-600">客户端通过 HTTP 获取页面数据，渲染内容并展示给用户。</p>
                                        </div>
                                    </div>
                                    <div class="flex items-start">
                                        <span class="bg-blue-100 text-blue-600 p-1 rounded-full mr-3 mt-1">
                                            <i class="fas fa-file-upload text-xs"></i>
                                        </span>
                                        <div>
                                            <p class="font-medium">文件下载和上传</p>
                                            <p class="text-sm text-gray-600">通过 HTTP 协议完成文件的传输，提供断点续传功能。</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Server-side Event Handling -->
                            <div>
                                <h4 class="font-semibold text-lg text-gray-800 mb-3">服务端的事件处理</h4>
                                <div class="space-y-3">
                                    <div class="flex items-start">
                                        <span class="bg-blue-100 text-blue-600 p-1 rounded-full mr-3 mt-1">
                                            <i class="fas fa-link text-xs"></i>
                                        </span>
                                        <div>
                                            <p class="font-medium">Webhook</p>
                                            <p class="text-sm text-gray-600">通过 HTTP 接口实现外部系统的事件通知和回调。例如：支付系统的支付结果通知。</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Comparison Table -->
            <div class="mt-12 bg-white rounded-xl shadow-md overflow-hidden">
                <div class="p-6">
                    <h3 class="text-xl font-bold mb-6">WebSocket 与 HTTP 的对比应用场景</h3>
                    <div class="overflow-x-auto">
                        <table class="comparison-table w-full">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-6 py-3 text-left text-sm font-semibold text-gray-700">特性</th>
                                    <th class="px-6 py-3 text-left text-sm font-semibold text-gray-700">WebSocket 应用场景</th>
                                    <th class="px-6 py-3 text-left text-sm font-semibold text-gray-700">HTTP 应用场景</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-200">
                                <tr>
                                    <td class="px-6 py-4 font-medium">通信模式</td>
                                    <td class="px-6 py-4">双向通信，实时互动</td>
                                    <td class="px-6 py-4">单向请求-响应，短时通信</td>
                                </tr>
                                <tr>
                                    <td class="px-6 py-4 font-medium">实时性要求</td>
                                    <td class="px-6 py-4">实时性要求高，低延迟互动</td>
                                    <td class="px-6 py-4">对实时性要求低，偶发请求</td>
                                </tr>
                                <tr>
                                    <td class="px-6 py-4 font-medium">数据传输</td>
                                    <td class="px-6 py-4">持续连接传输，适合频繁小数据交互</td>
                                    <td class="px-6 py-4">单次请求传输，适合大数据块传输</td>
                                </tr>
                                <tr>
                                    <td class="px-6 py-4 font-medium">典型应用</td>
                                    <td class="px-6 py-4">聊天、实时推送、在线游戏、物联网</td>
                                    <td class="px-6 py-4">静态资源加载、API 调用、表单提交</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            
            <!-- Hybrid Scenarios -->
            <div class="mt-12 bg-white rounded-xl shadow-md p-8">
                <h3 class="text-xl font-bold mb-6">综合应用场景的实践</h3>
                <h4 class="font-semibold text-lg text-gray-800 mb-4">混合场景</h4>
                <p class="mb-6">在复杂业务中，WebSocket 和 HTTP 通常结合使用，满足不同需求：</p>
                
                <div class="grid md:grid-cols-3 gap-6">
                    <!-- E-commerce -->
                    <div class="p-4 bg-gray-50 rounded-lg">
                        <h5 class="font-semibold mb-2">电子商务平台</h5>
                        <ul class="list-disc pl-5 space-y-1 text-sm">
                            <li><span class="font-medium">HTTP：</span> 商品列表加载、订单提交、用户管理。</li>
                            <li><span class="font-medium">WebSocket：</span> 实时推送订单状态、库存更新。</li>
                        </ul>
                    </div>
                    
                    <!-- Online Education -->
                    <div class="p-4 bg-gray-50 rounded-lg">
                        <h5 class="font-semibold mb-2">在线教育系统</h5>
                        <ul class="list-disc pl-5 space-y-1 text-sm">
                            <li><span class="font-medium">HTTP：</span> 加载课程视频、提交作业。</li>
                            <li><span class="font-medium">WebSocket：</span> 实时课堂互动、消息通知。</li>
                        </ul>
                    </div>
                    
                    <!-- Financial System -->
                    <div class="p-4 bg-gray-50 rounded-lg">
                        <h5 class="font-semibold mb-2">金融系统</h5>
                        <ul class="list-disc pl-5 space-y-1 text-sm">
                            <li><span class="font-medium">HTTP：</span> 用户查询账户信息、交易记录。</li>
                            <li><span class="font-medium">WebSocket：</span> 实时推送市场数据、价格变化。</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-gray-900 text-gray-300 py-8 px-4">
        <div class="container mx-auto max-w-5xl">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <h3 class="text-xl font-bold text-white mb-2">技术小馆</h3>
                    <p class="text-sm">探索技术世界的奥秘</p>
                </div>
                <div>
                    <a href="http://www.yuque.com/jtostring" class="text-gray-300 hover:text-white transition duration-300 flex items-center">
                        <i class="fas fa-globe mr-2"></i> http://www.yuque.com/jtostring
                    </a>
                </div>
            </div>
        </div>
    </footer>

    <!-- Mermaid JS -->
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
    </script>
</body>
</html>
```